<template>
  <div class="member-benefits">
    <div class="benefits-header">
      <h1>会员权益</h1>
      <p class="subtitle">享受更多学习特权，提升学习效率</p>
    </div>

    <div class="benefits-cards">
      <div class="benefit-card premium">
        <div class="card-header">
          <h2>高级会员</h2>
          <div class="price">
            <span class="currency">¥</span>
            <span class="amount">99</span>
            <span class="period">/月</span>
          </div>
        </div>
        <div class="card-body">
          <ul class="features">
            <li><icon-check-circle-fill /> 无限制访问所有课程</li>
            <li><icon-check-circle-fill /> 专属学习计划定制</li>
            <li><icon-check-circle-fill /> 优先客服支持</li>
            <li><icon-check-circle-fill /> 学习进度详细分析</li>
            <li><icon-check-circle-fill /> 离线下载课程</li>
          </ul>
          <a-button type="primary" size="large" class="upgrade-btn">
            立即升级
          </a-button>
        </div>
      </div>

      <div class="benefit-card standard">
        <div class="card-header">
          <h2>普通会员</h2>
          <div class="price">
            <span class="currency">¥</span>
            <span class="amount">29</span>
            <span class="period">/月</span>
          </div>
        </div>
        <div class="card-body">
          <ul class="features">
            <li><icon-check-circle-fill /> 访问基础课程</li>
            <li><icon-check-circle-fill /> 基础学习工具</li>
            <li><icon-check-circle-fill /> 社区讨论参与</li>
            <li><icon-minus-circle /> 高级课程需单独购买</li>
            <li><icon-minus-circle /> 有限客服支持</li>
          </ul>
          <a-button size="large" class="upgrade-btn">
            选择此套餐
          </a-button>
        </div>
      </div>
    </div>

    <div class="current-status">
      <h3>当前会员状态</h3>
      <div class="status-card">
        <div class="status-info">
          <div class="status-badge">免费用户</div>
          <p>您当前是免费用户，升级会员享受更多特权</p>
        </div>
        <a-button type="primary">立即升级</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { IconCheckCircleFill, IconMinusCircle } from '@arco-design/web-vue/es/icon'
</script>

<style lang="less" scoped>
.member-benefits {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  .benefits-header {
    text-align: center;
    margin-bottom: 40px;
    
    h1 {
      margin: 0 0 8px 0;
      font-size: 32px;
      font-weight: 600;
      color: var(--color-text-1);
    }
    
    .subtitle {
      margin: 0;
      font-size: 16px;
      color: var(--color-text-3);
    }
  }

  .benefits-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
  }

  .benefit-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease;
    
    &:hover {
      transform: translateY(-4px);
    }
    
    &.premium {
      border: 2px solid var(--color-primary);
      
      .card-header {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light-2) 100%);
        color: white;
      }
    }
    
    &.standard {
      border: 1px solid var(--color-border-2);
      
      .card-header {
        background: var(--color-fill-2);
        color: var(--color-text-1);
      }
    }

    .card-header {
      padding: 24px;
      text-align: center;
      
      h2 {
        margin: 0 0 16px 0;
        font-size: 24px;
        font-weight: 600;
      }
      
      .price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        
        .currency {
          font-size: 18px;
        }
        
        .amount {
          font-size: 36px;
          font-weight: bold;
          margin: 0 4px;
        }
        
        .period {
          font-size: 16px;
        }
      }
    }

    .card-body {
      padding: 24px;
      
      .features {
        list-style: none;
        padding: 0;
        margin: 0 0 24px 0;
        
        li {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          font-size: 14px;
          
          .arco-icon {
            margin-right: 8px;
            font-size: 16px;
            
            &.arco-icon-check-circle-fill {
              color: var(--color-success);
            }
            
            &.arco-icon-minus-circle {
              color: var(--color-text-4);
            }
          }
        }
      }
      
      .upgrade-btn {
        width: 100%;
      }
    }
  }

  .current-status {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    h3 {
      margin: 0 0 16px 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--color-text-1);
    }
    
    .status-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background: var(--color-fill-1);
      border-radius: 8px;
      
      .status-info {
        flex: 1;
        
        .status-badge {
          display: inline-block;
          padding: 4px 12px;
          background: var(--color-warning-light-4);
          color: var(--color-warning);
          border-radius: 16px;
          font-size: 12px;
          font-weight: 500;
          margin-bottom: 8px;
        }
        
        p {
          margin: 0;
          color: var(--color-text-3);
          font-size: 14px;
        }
      }
    }
  }
}
</style>